<template>
  <!-- 告警推送 -->
  <div class="JointInspection-report">
    <div class="JointInspection-report-partone borderStyle relative">
      <div class="title">告警选择</div>
      <div class="content mediumtablestyle">
        <el-table
        border
          :data="newTableData1"
          @selection-change="handleSelectionChange1"
          :row-class-name="tableRowClassName"
          style="width: 100%"
          height="100%"
        >
        <el-table-column type="selection"></el-table-column>
          <el-table-column type="index" width="60" label="序号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="JGMC" label="间隔单元" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="SBMC" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="XJDW" label="巡检点位" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="XSFS" label="巡检方式" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="XSJG" label="巡检结果" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="SBJG" label="识别结论" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <!-- <div class="self-pagination elPaginationStyle centerbox">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="pages1.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages1.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages1.totalSize"
        ></el-pagination>
      </div> -->
    </div>
    <div class="JointInspection-report-parttwo borderStyle relative">
      <div class="title">终端选择</div>
      <div class="content mediumtablestyle">
        <el-table
        border
          :data="newTableData2"
          @selection-change="handleSelectionChange2"
          :row-class-name="tableRowClassName"
          style="width: 100%"
          height="100%"
        >
          <el-table-column type="index" width="60" label="序号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="WHBZMC" label="班组" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="LOGIN_NAME" label="姓名" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="YDZDBH" label="终端编号" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <div class="self-pagination elPaginationStyle centerbox">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="pages2.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages2.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages2.totalSize"
        ></el-pagination>
      </div>
    </div>
    <div class="JointInspection-report-btn">
      <el-button class="table-query" type="primary" @click="pushInfo">推送</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
//basicInfo 基本信息   abnormal异常巡检信息
// import { basicInfo, abnormal } from "./reportcom/index";

@Component({ components: {} })
export default class extends Vue {
  @Prop()
  Manipulation: any;
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }
  /********************************** 告警选择 *************************************/
  // 勾选的消息
  tableSelect1 = [];
  // 表格选择事件
  handleSelectionChange1(val: any): void {
    // console.log(val);
    this.tableSelect1 = val;
  }
  //分页数据事件相关
  pages1: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange1(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages1.pageSize = val;
    this.pages1.page = 1;
    this.queryAuxRealtimeList1();
  }
  // 分页事件
  handleCurrentChange1(val: any) {
    this.pages1.page = val;
    this.queryAuxRealtimeList1();
  }
  //table表格相关事件数据
  tableData1 = [
    // {
    //   SSDSMC: "11",
    //   BDZMC: "22",
    //   DYDJMC: "33",
    //   JHKSSJ: "44",
    //   STATUS: "55",
    //   SFQX: "66",
    // },
  ];
  get newTableData1() {
    let tableData = this.tableData1;
    return tableData;
  }

  // // 查询告警选择表格数据
  // queryAuxRealtimeList1() {
  //   let form = {
  //     rows: this.pages1.pageSize, // 每页多少条
  //     page: this.pages1.page, // 第几页
  //     jhid: this.Manipulation.ID,
  //     jhlx: this.Manipulation.JHLX || null,
  //     xslx: this.Manipulation.XSLX,
  //   };
  //   // console.log("form:",form);
  //   (this as any).$services
  //     .getYcDataList({ data: form, method: "get" })
  //     .then((result: any) => {
  //       if (result.data) {
  //         let data = result.data;
  //         this.tableData1 = data.rows;
  //         this.pages1.totalSize = data.total;
  //       }
  //     })
  //     .catch((err: object) => {
  //       console.log(err);
  //     });
  // }

    // 查询告警选择表格数据
  queryAuxRealtimeList1() {
    let form = {
      jhid: this.Manipulation.ID,
      xslx: this.Manipulation.XSLX,
    };
    // console.log("form:",form);
    (this as any).$services
      .getYcbgData({ data: form, method: "get" })
      .then((result: any) => {
        if (result.data) {
          this.tableData1 = result.data
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  /********************************** 终端选择 *************************************/
  // 勾选的消息
  tableSelect2 = [];
  // 表格选择事件
  handleSelectionChange2(val: any): void {
    // console.log(val);
    this.tableSelect2 = val;
    console.log(this.tableSelect2);
    
  }
  //分页数据事件相关
  pages2: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange2(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages2.pageSize = val;
    this.pages2.page = 1;
    this.queryAuxRealtimeList2();
  }
  // 分页事件
  handleCurrentChange2(val: any) {
    this.pages2.page = val;
    this.queryAuxRealtimeList2();
  }
  //table表格相关事件数据
  tableData2 = [
    // {
    //   SSDSMC: "11",
    //   BDZMC: "22",
    //   DYDJMC: "33",
    //   JHKSSJ: "44",
    //   STATUS: "55",
    //   SFQX: "66",
    // },
  ];
  get newTableData2() {
    let tableData = this.tableData2;
    return tableData;
  }
  // 查询终端选择表格数据
  queryAuxRealtimeList2() {
    let form = {
      rows: this.pages2.pageSize, // 每页多少条
      page: this.pages2.page, // 第几页
    };
    // console.log("form:",form);
    (this as any).$services
      .getYdzdList({ data: form, method: "get" })
      .then((result: any) => {
        if (result.data) {
          let data = result.data;
          this.tableData2 = data.rows;
          this.pages2.totalSize = data.total;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 推送
  private pushInfo() {
    if (this.tableSelect1.length<1&&this.tableSelect2.length<1) {
       this.$message({
            type: "warning",
            message: `请选择数据`,
          });
          return;
    }
    var from:any={
      sbdata:'',
      ycdata:''
    };
    if (this.tableSelect1&&this.tableSelect1.length>0) {
      from.sbdata=this.tableSelect1
      
    }
    if (this.tableSelect2&&this.tableSelect2.length>0) {
      from.ycdata =JSON.stringify(this.tableSelect2)
      
    }
    console.log(from);
    
    // postparams:true
    (this as any).$services
          .getYcsjTs({ data: from, method: "post", })
          .then((result: any) => {
            console.log(result);
             if (result.code==200) {
            this.$message({
            type: "success",
            message: `${result.message}`,
          });
          }else{
            this.$message({
            type: "warning",
            message: `操作失败`,
          });
          }
          this.$emit('handleClose3')
          })
          .catch((err: object) => {
            console.log(err);
          });
    
  }

  mounted() {
    // 请求数据
    this.queryAuxRealtimeList1();
    this.queryAuxRealtimeList2();
  }
}
</script>

<style lang="scss" scoped>
.JointInspection-report {
  width: 100%;
  height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .JointInspection-report-partone {
    width: 100%;
    height: 45%;
    overflow-y: auto;
    // background-color: pink;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 10%;
      // background-color: pink;
      padding-top: 0.08rem;
      padding-left: 0.08rem;
    }
    .content {
      // flex: 1;
      // background-color: plum;
      height: 90%;
      width: 100%;
      // margin-top: 0.1rem;
      overflow-y: auto;
    }
    .self-pagination {
      width: 100%;
      height: 10%;
    }
  }
  .JointInspection-report-parttwo {
    width: 100%;
    height: 45%;
    overflow-y: auto;
    // background-color: pink;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 10%;
      // background-color: pink;
      padding-top: 0.08rem;
      padding-left: 0.08rem;
    }
    .content {
      // flex: 1;
      // background-color: plum;
      height: 80%;
      width: 100%;
      // margin-top: 0.1rem;
    }
    .self-pagination {
      width: 100%;
      height: 10%;
    }
  }
  .JointInspection-report-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 0.04rem;
  }
}
</style>
<style lang="scss">
.JointInspection-report {
  .el-collapse {
    border: none;
    background: #002279;
    margin-bottom: 0.1rem;
  }
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border: none;
  }
}
</style>

